<template>
  <div class="index-bot">
    <div class="container"
         style="min-height: 200px;">

      <!-- <div class="wechart">
				<img :src="img2" alt="" />
				<p>微信公众号</p>
			</div>
			<div class="contact item">
				<div class="title"><p>联系我们</p></div>
				<div class="content">
					<p class="t">“猪爸爸”起名平台</p>
					<p class="i">地址：哈尔滨市南岗区哈西中交香颂A栋1006室</p>
					<p class="i">邮箱：service@zhuababa.cn</p>
				</div>
			</div>
			<div class="service item">
				<div class="title"><p>服 务</p></div>
				<div class="content">
					<p class="num">0451-86650733</p>
					<p class="i">服务热线</p>
				</div>
				<a href="#" class="con-online"><img :src="img1" alt="" /></a>
			</div> -->
      <el-row class="w-100"
              :gutter="10">
        <el-col :span="24"
                :md="8">
          <div class="webbox">
            <img :src="logo" />
            <p class="mobile-title">猪爸爸服务热线</p>
            <p class="mobile">0451-86650733</p>
          </div>
        </el-col>
        <el-col :span="10"
                :md="3">
          <div class="foot-center-box">
            <div class="foot-item">
              <h5 class="foot-title">
                <span class="splice"></span>
                <p>关于猪爸爸</p>
              </h5>
              <router-link :to="{path:'/aboutus/contact',query:{nowid:'',now:'contact'}}"
                           tag="p"
                           class="li"
                           @click.native="goTop">联系我们</router-link>
              <router-link :to="{path:'/aboutus/contact',query:{nowid:'085bcc2b3a16483c8806d59f3b63f52d'}}"
                           tag="p"
                           class="li"
                           @click.native="goTop">关于我们</router-link>
              <router-link @click.native="goTop"
                           :to="{path:'/aboutus/contact',query:{nowid:'03932e89939945f1831880fc18e52ad8'}}"
                           tag="p"
                           class="li">服务协议</router-link>
              <router-link @click.native="goTop"
                           :to="{path:'/aboutus/contact',query:{nowid:'b1a2c41354c54246b1028e47baad021c'}}"
                           tag="p"
                           class="li">隐私协议</router-link>
              <router-link @click.native="goTop"
                           :to="{path:'/aboutus/contact',query:{nowid:'d9dd3fa837bf4384877f97c335096560'}}"
                           tag="p"
                           class="li">商户合作</router-link>
            </div>
          </div>
        </el-col>
        <el-col :span="14"
                :md="4"
                class="pc-s">
          <div class="foot-center-box">
            <div class="foot-item">
              <h5 class="foot-title">
                <span class="splice"></span>
                <p>产品服务</p>
              </h5>
              <p class="row">
                <router-link @click.native="goTop"
                             to="/classic_input"
                             tag="p"
                             class="li">经典起名</router-link>
                <router-link @click.native="goTop"
                             to="/high_input"
                             tag="p"
                             class="li">高分起名</router-link>
              </p>
              <p class="row">
                <router-link @click.native="goTop"
                             to="/select_author"
                             tag="p"
                             class="li">诗词起名</router-link>
                <router-link @click.native="goTop"
                             to="/wuxing_input"
                             tag="p"
                             class="li">五行字典</router-link>
              </p>
              <p class="row">
                <router-link @click.native="goTop"
                             to="/search_name"
                             tag="p"
                             class="li">重名查询</router-link>
                <router-link @click.native="goTop"
                             to="/name_grade"
                             tag="p"
                             class="li">姓名打分</router-link>
              </p>
              <p class="row">
                <router-link @click.native="goTop"
                             to="/birth_input"
                             tag="p"
                             class="li">生辰八字</router-link>
                <router-link @click.native="goTop"
                             to="/holdall"
                             tag="p"
                             class="li">更多工具</router-link>
              </p>
            </div>
          </div>
        </el-col>
        <el-col :span="12"
                :md="3">
          <div class="foot-center-box">
            <div class="foot-item">
              <h5 class="foot-title">
                <span class="splice"></span>
                <p>微信公众号</p>
              </h5>
              <img :src="ewm" />
            </div>
          </div>
        </el-col>
        <el-col :span="12"
                :md="3">
          <div class="foot-center-box">
            <div class="foot-item">
              <h5 class="foot-title">
                <span class="splice"></span>
                <p>猪爸爸小程序</p>
              </h5>
              <img :src="wxapp" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="userBox">
      <p class="userBox-wrapper"
         @click="website('http://www.beian.miit.gov.cn/')">
				Copyright 2019猪爸爸起名平台 黑ICP备16008352号-6
				<!-- <span>黑ICP备16008352号-6</span> -->
      </p>

      <p class="userBox-wrapper userBox-wrapper2"
         @click="website('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=23010302000975')">
        <img src="../assets/images/beian.png">
        <span>黑公网安备 23010302000975号</span>
      </p>
    </div>
  </div>
</template>

<script>
import img1 from '@/assets/images/btn-zx.png';
import beian from '@/assets/images/beian.png';
import img2 from '@/assets/images/qrcode.png';
import logo from '@/assets/images/index.png';
import ewm from '@/assets/images/wxe.jpg';
import wxapp from '@/assets/images/wxapp.jpg';
export default {
  data () {
    return {
      img1,
      img2,
      logo,
      ewm,
      wxapp,
    };
  },
  methods: {
    goTop () {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      //用于设置速度差，产生缓动的效果
      let speed = Math.floor(top / 8);
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= speed;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    website (url) {
      let link = url
      window.open(link, '_blank');
    }
  },
  created () {

  },
  mounted () {

  }
};
</script>

<style>
.userBot {
  color: #a9a9ad !important;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 450px) {
  .pc-s {
    margin-right: 80px;
  }
}
@media screen and (max-width: 450px) {
  .webbox {
    margin-bottom: 20px;
  }
  .foot-item {
    margin-top: 20px;
    min-height: 220px;
    padding-left: 10%;
  }
  .userBot {
    line-height: 1.5 !important;
    padding-bottom: 20px;
  }
}
.webbox {
  padding-left: 30%;
}
.foot-item img {
  width: 120px;
  height: 120px;
}
.row {
  width: 130px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.li {
  font-size: 12px;
  font-family: SourceHanSansCN;
  font-weight: 400;
  color: rgba(161, 161, 161, 1);
  line-height: 26px;
  cursor: pointer;
}
.foot-title .splice {
  width: 4px;
  height: 14px;
  background: rgba(64, 92, 219, 1);
  margin-right: 9px;
  display: inline-flex;
}
.foot-title p {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(243, 244, 245, 1);
}
.foot-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 22px;
}
.foot-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.foot-center-box {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.mobile {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.mobile-title {
  font-size: 12px;
  font-family: SourceHanSansCN;
  font-weight: 400;
  color: rgba(161, 161, 161, 1);
  margin-top: 18px;
  margin-bottom: 10px;
}

@media (max-width: 720px) {
	.userBox {
		color: #fff;
		height: 38px;
		cursor: pointer;
	}

	.userBox-wrapper{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20px;
	}
}


@media (min-width: 1200px) {
	.userBox {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 38px;
		cursor: pointer;
	}

	.userBox-wrapper{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20px;
	}

}


/* .beian-container{
			display: flex;
		} */
</style>
